<template>
  <div class="device-management">
    <div class="left">
      <!-- 左侧列表搜索 -->
      <div class="left-search">
        <div class="search">
          <a-input
            placeholder="回车搜索"
            v-model="leftSearch.printerTypeName"
            @keyup.enter="checkLeftList"
          />
        </div>
        <div class="icon">
          <a-icon
            type="plus"
            style="margin-right: 0.625rem"
            class="icon-class"
            @click="addLeftFun"
          />
        </div>
      </div>

      <!-- 左边列表 Start -->
      <div
        :class="['left-list', lefeList.length == 0 ? 'empty-box' : '']"
        infinite-scroll-immediate-check="false"
        infinite-scroll-listen-for-event="false"
        v-infinite-scroll="handleinfiniteOnLoad"
        infinite-scroll-disabled="busy"
        infinite-scroll-distance="20"
      >
        <a-empty v-if="lefeList.length == 0" />
        <div v-else>
          <div
            :class="[
              'list-box',
              leftInfo.PrinterTypeID == item.PrinterTypeID ? 'active' : '',
            ]"
            v-for="item in lefeList"
            :key="item.PrinterTypeID"
            @click="getTableFun(item)"
          >
            <div class="list-left">{{ item.PrinterTypeName }}</div>
            <div
              class="list-right"
              v-if="
                leftInfo.PrinterTypeID == item.PrinterTypeID &&
                leftInfo.PrinterTypeID
              "
            >
              <a-dropdown>
                <a-icon type="ellipsis" :rotate="90" />
                <a-menu slot="overlay">
                  <a-menu-item>
                    <span
                      @click="editLeftFun(item)"
                      style="display: flex; align-items: center"
                      ><a-icon
                        type="edit"
                        style="margin-right: 0.625rem"
                      />修改</span
                    >
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>
          </div>
        </div>
      </div>
      <!-- 左边列表 End -->
    </div>
    <div class="right">
      <div class="right-title">
        <a-form layout="inline">
          <a-form-item label="外设条码">
            <a-input v-model:value="tableSearch.printerBarcode" allowClear />
          </a-form-item>
          <a-form-item label="外设编码">
            <a-input v-model:value="tableSearch.printerNo" allowClear />
          </a-form-item>
          <a-form-item label="外设名称">
            <a-input v-model:value="tableSearch.printerName" allowClear />
          </a-form-item>
          <a-form-item>
            <general-button
              @operation="checkTableFun"
              btnText="查询"
              btnPowerNum="A707D186-FFAD-429F-8F11-6EE9022A5941"
            ></general-button>
          </a-form-item>
          <a-form-item>
            <general-button
              @operation="addTableFun"
              btnText="新增"
              btnPowerNum="93396035-5677-46BA-B3B8-A5946B3DDA3A"
              :btnDisabled="!leftInfo.PrinterTypeID"
            ></general-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="table-box" id="OperationManageID">
        <a-table
          :columns="tableColumns"
          :row-key="(record) => record.PrinterID"
          :data-source="tableData"
          :loading="loading"
          :rowClassName="setRowClassName"
          :pagination="false"
          :scroll="{ x: 300, y: procedurescrollY }"
          size="small"
        >
          <template slot="action" slot-scope="text, record">
            <div style="display: flex; justify-content: space-around">
              <a-icon
                type="edit"
                class="icon-class"
                @click="editTabFun(record)"
              />
            </div>
          </template>
        </a-table>
        <footer class="table-paging">
          <a-pagination
            show-size-changer
            :default-current="1"
            v-model="tableSearch.pageRequestModel.pageIndex"
            :page-size.sync="tableSearch.pageRequestModel.pageSize"
            :total="tableTotal"
            @change="tableChange"
            @showSizeChange="tablehowsizeChange"
          />
        </footer>
      </div>
    </div>

    <type-model
      :show.sync="leftAddShow"
      :item="leftAddInfo"
      :isEdit="leftIsEdit"
      @updata="resetLeftList"
    ></type-model>

    <table-model
      :show.sync="tableShow"
      :item="tableInfo"
      :isEdit="tableEdit"
      @updata="resetTableList"
    ></table-model>
  </div>
</template>
<script>
import moment from "moment";
import GeneralButton from "@/components/be-current-btn.vue";
import TypeModel from "./children/device-type-model.vue";
import TableModel from "./children/device-table-model.vue";
import { getTableScroll } from "@/common/table-calc";
import { getTabPrinterTypeList, getTabPrinterList } from "@/api/peripherals";
export default {
  name: "ExternalDevice",
  components: {
    GeneralButton,
    TypeModel,
    TableModel,
  },
  data() {
    return {
      leftSearch: {
        printerTypeName: null,
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 30,
        },
      }, //左侧搜索
      lefeList: [{ PrinterTypeName: "全部", PrinterTypeID: null }], //左侧列表
      leftAddShow: false, //左侧列表添加控制弹窗
      leftIsEdit: false, //左侧列表添加是否修改
      leftAddInfo: {}, //左侧列表添加对象
      leftInfo: { label: "全部", value: "" }, //当前选中信息
      tableRow: {}, //当前tab项
      tableColumns: [
        {
          title: "序号",
          dataIndex: "num",
          key: "num",
          align: "center",
          width: "60px",
        },
        {
          title: "外设类型",
          dataIndex: "PrinterTypeName",
          key: "PrinterTypeName",
          ellipsis: true,
          align: "center",
          width: "150px",
        },
        {
          title: "外设编码",
          dataIndex: "PrinterNo",
          key: "PrinterNo",
          ellipsis: true,
          align: "center",
          width: "150px",
        },
        {
          title: "外设名称",
          dataIndex: "PrinterName",
          key: "PrinterName",
          ellipsis: true,
          align: "center",
          width: "150px",
        },
        {
          title: "外设条码",
          dataIndex: "PrinterBarcode",
          key: "PrinterBarcode",
          ellipsis: true,
          align: "center",
          width: "150px",
        },
        {
          title: "IP地址",
          dataIndex: "PrinterIP",
          key: "PrinterIP",
          ellipsis: true,
          align: "center",
          width: "150px",
        },
        {
          title: "端口",
          dataIndex: "PrinterPort",
          key: "PrinterPort",
          ellipsis: true,
          align: "center",
          width: "150px",
        },
        {
          title: "外设描述",
          dataIndex: "PrinterDescription",
          key: "PrinterDescription",
          ellipsis: true,
          align: "center",
          width: "150px",
        },
        {
          title: "是否反转",
          dataIndex: "IsReverseName",
          key: "IsReverseName",
          ellipsis: true,
          align: "center",
          width: "150px",
        },
        {
          title: "是否取绝对值",
          dataIndex: "IsAbsoluteName",
          key: "IsAbsoluteName",
          ellipsis: true,
          align: "center",
          width: "150px",
        },
        {
          title: "打印宽度",
          dataIndex: "PaperWidth",
          key: "PaperWidth",
          ellipsis: true,
          align: "center",
          width: "150px",
        },

        {
          title: "打印长度",
          dataIndex: "PaperLong",
          key: "PaperLong",
          ellipsis: true,
          align: "center",
          width: "150px",
        },
        {
          title: "数组分隔符",
          dataIndex: "ArraySplitStr",
          key: "ArraySplitStr",
          ellipsis: true,
          align: "center",
          width: "150px",
        },
        {
          title: "值分隔符",
          dataIndex: "ValueSplitStr",
          key: "ValueSplitStr",
          ellipsis: true,
          align: "center",
          width: "150px",
        },
        {
          title: "取值模式",
          dataIndex: "ValueModeName",
          key: "ValueModeName",
          ellipsis: true,
          align: "center",
          width: "150px",
        },
        {
          title: "截取长度",
          dataIndex: "InterceptedLength",
          key: "InterceptedLength",
          ellipsis: true,
          align: "center",
          width: "150px",
        },
        {
          title: "截取开始位置",
          dataIndex: "StartIndex",
          key: "StartIndex",
          ellipsis: true,
          align: "center",
          width: "150px",
        },
        {
          title: "打印DPI",
          dataIndex: "DPI",
          key: "DPI",
          ellipsis: true,
          align: "center",
          width: "150px",
        },
        {
          title: "打印DPM",
          dataIndex: "DPM",
          key: "DPM",
          ellipsis: true,
          align: "center",
          width: "150px",
        },
        {
          title: "数据长度",
          dataIndex: "DataLength",
          key: "DataLength",
          ellipsis: true,
          align: "center",
          width: "150px",
        },
        {
          title: "取数指令",
          dataIndex: "FetchInstruction",
          key: "FetchInstruction",
          ellipsis: true,
          align: "center",
          width: "150px",
        },
        {
          title: "清零指令",
          dataIndex: "Clearlnstruction",
          key: "Clearlnstruction",
          ellipsis: true,
          align: "center",
          width: "150px",
        },
        {
          title: "去皮指令",
          dataIndex: "PeelingInstruction",
          key: "PeelingInstruction",
          ellipsis: true,
          align: "center",
          width: "150px",
        },
        {
          title: "操作",
          dataIndex: "operate",
          width: "50",
          align: "center",
          scopedSlots: { customRender: "action" },
          fixed: "right",
        },
      ],
      tableSearch: {
        pageRequestModel: { pageIndex: 1, pageSize: 20 },
        printerBarcode: null,
        printerName: null,
        printerTypeID: null,
      }, //表格搜索
      tableTotal: 0, //表格总条数
      tableData: [], //表格列表
      loading: false, //表格loading
      procedurescrollY: 0, //动态计算表格高度
      tableShow: false, //表格添加项
      tableInfo: {}, //表格添加对象
      tableEdit: false, //表格是否添加
    };
  },
  mounted() {
    this.upLeftFun();
  },
  computed: {},
  methods: {
    /** 查询左侧列表 */
    async upLeftFun() {
      try {
        let res = await getTabPrinterTypeList(this.leftSearch);
        this.lefeList = [...this.lefeList, ...res.Data.Data];
        this.leftInfo = this.lefeList[0];
        this.getTableListFun();
      } catch (e) {
        this.$message.error(e);
      }
    },

    /** 重置查询左侧列表 */
    resetLeftList() {
      this.lefeList = [{ PrinterTypeName: "全部", PrinterTypeID: null }];
      this.leftSearch = {
        ...this.leftSearch,
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 30,
        },
      };
      this.upLeftFun();
    },

    /** 查询左侧列表 */
    checkLeftList() {
      this.lefeList = [{ PrinterTypeName: "全部", PrinterTypeID: null }];
      this.leftSearch = {
        ...this.leftSearch,
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 30,
        },
      };
      this.upLeftFun();
    },

    /** 左侧列表添加 */
    addLeftFun() {
      if (!this.hasPermission("1293538C-0420-40E5-B05E-2B856E396D57"))
        return this.$message.error("当前无权限");
      this.leftAddInfo = {};
      this.leftIsEdit = false;
      this.leftAddShow = true;
    },

    /** 左侧列表修改 */
    editLeftFun(item) {
      if (!this.hasPermission("E07A456C-DF6A-460D-84E1-A1B5C1DDCBCC"))
        return this.$message.error("当前无权限");
      this.leftAddInfo = JSON.parse(JSON.stringify(item));
      this.leftIsEdit = true;
      this.leftAddShow = true;
    },
    /**查询右侧列表 */
    async getTableFun(item) {
      this.leftInfo = item;

      this.getTableListFun();
    },

    /** 更新右侧表格 */
    resetTableList() {
      this.tableSearch.pageRequestModel.pageIndex = 1;
      this.tableSearch.pageRequestModel.pageSize = 20;
      this.getTableListFun();
    },

    /** 右侧列表添加 */
    addTableFun() {
      this.tableInfo = {
        PrinterTypeID: this.leftInfo.PrinterTypeID,
        ValueMode: 1,
        IsAbsolute: true,
        IsReverse: true,
        PrinterPort: 8899,
        FetchInstruction: "1B70",
        PeelingInstruction: "1B74",
        InterceptedLength: 8,
        StartIndex: 1,
        DataLength: 14,
        DPI: 0,
        DPM: 8,
        PaperLong: 100,
        PaperWidth: 80,
      };
      this.tableShow = true;
      this.tableEdit = false;
    },

    /** 右侧列表查询 */
    checkTableFun() {
      this.tableSearch.pageRequestModel.pageIndex = 1;
      this.tableSearch.pageRequestModel.pageSize = 20;
      this.getTableListFun();
    },

    /** 右侧列表修改 */
    editTabFun(item) {
      if (!this.hasPermission("B94AAD16-8100-4BF3-8573-88E906C4FFC7"))
        return this.$message.error("当前无权限");
      this.tableInfo = item;
      this.tableEdit = true;
      this.tableShow = true;
    },

    /** 查询表格列表 */
    async getTableListFun() {
      try {
        this.tableSearch.printerTypeID = this.leftInfo.PrinterTypeID;
        let res = await getTabPrinterList(this.tableSearch);
        let { pageIndex, pageSize } = this.tableSearch.pageRequestModel;
        res.Data.Data.map((item, index) => {
          item.num = (pageIndex - 1) * pageSize + index + 1;
          item.ValueModeName = item.ValueMode == 0 ? "取值分隔符" : "截取长度";
          item.IsAbsoluteName = item.IsAbsolute ? "是" : "否";
          item.IsReverseName = item.IsReverse ? "是" : "否";
        });
        this.tableTotal = res.Data.TotalNumber;
        this.tableData = res.Data.Data;
      } catch (e) {
        this.$message.error(e);
      }
    },

    /** 滚动触底方法 */
    handleinfiniteOnLoad() {
      this.busy = true;
      setTimeout(() => {
        this.leftSearch.pageRequestModel.pageIndex += 1;
      }, 1000);
    },
    /** 选中表格项变换颜色 */
    setRowClassName(record, index) {
      return record.PrinterID == this.tableRow.PrinterID ? "clickRowStyl" : ""; //
    },
    /** 表格页数点击 */
    tableChange(page, pageSize) {
      this.tableSearch.pageRequestModel.pageIndex = page;
      this.tableSearch.pageRequestModel.pageSize = pageSize;
      this.getTableListFun();
    },
    /** 表格条数选择 */
    tablehowsizeChange(current, size) {
      this.tableSearch.pageRequestModel.pageIndex = current;
      this.tableSearch.pageRequestModel.pageSize = size;
      this.getTableListFun();
    },
  },
  updated() {
    this.$nextTick(() => {
      this.procedurescrollY = getTableScroll(80, "OperationManageID");
    });
  },
};
</script>
<style scoped lang="less">
.device-management {
  background-color: #ffffff;

  padding: 0.5rem 1rem;
  flex: 1;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;

  .left {
    flex: 1;

    .left-search {
      display: flex;
      align-items: center;
      padding-bottom: 0.625rem;
      box-sizing: border-box;
      margin-bottom: 1.25rem;
      border-bottom: 2px solid #f0f2f5;

      .search {
        flex: 1;
      }

      .icon {
        margin-left: 1.25rem;
      }
    }

    .left-list {
      height: calc(100% - 64px);
      overflow-y: auto;

      &::-webkit-scrollbar {
        margin: 0.2rem;
        //整体样式
        height: 0.4125rem;
        width: 0.3rem;
      }

      &::-webkit-scrollbar-thumb {
        //滑动滑块条样式
        border-radius: 0.625rem;
        -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
        background: #009a9a;
        // background: rgba(2, 35, 60, 1);
      }

      &::-webkit-scrollbar-track {
        //轨道的样式
        -webkit-box-shadow: 0;
        border-radius: 0.625rem;
        background: #ccc;
      }

      &::-webkit-scrollbar-corner {
        background: red;
      }

      .list-box {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        font-size: 0.8125rem;
        padding: 0.9375rem 0.625rem;
        cursor: pointer;
        margin: 0 0.625rem;

        .list-left {
          flex: 6;
        }

        .list-right {
          flex: 1;
        }
      }

      .list-box:hover {
        background-color: #ecf7f8;
      }

      .active {
        background-color: #dcf0ef;
      }
    }
  }

  .right {
    margin-left: 1.25rem;
    flex: 5;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .right-title {
      margin-bottom: 0.625rem;
    }

    .right-info {
      display: flex;
      margin-bottom: 0.625rem;

      .info-box {
        margin-right: 1.25rem;
        font-size: 0.5rem;
      }
    }

    .table-box {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 240px;
      .table-paging {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-top: 10px;

        .navigation-bottom {
          display: flex;

          .tabs-box {
            margin: 0 0.625rem;
            color: #9ea2a6;
            padding: 0.3125rem 1.875rem;
            font-weight: 600;
            cursor: pointer;
          }

          .active {
            background-color: #6c5bcf;
            color: #f0fbfa;
            border-radius: 0.625rem;
          }
        }
      }
    }
  }
}

.filter-content {
  padding-bottom: 0.625rem;
  margin-bottom: 0.625rem;
  border-bottom: 1px solid #f0f2f5;
}

.filter-footer {
  display: flex;
  justify-content: flex-end;

  button:nth-child(1) {
    margin-right: 0.625rem;
  }
}

//表格滚动条
/deep/.ant-table-body {
  overflow-x: hidden;

  &::-webkit-scrollbar {
    margin: 0.2rem;
    //整体样式
    height: 0.4125rem;
    width: 0.3rem;
  }

  &::-webkit-scrollbar-thumb {
    //滑动滑块条样式
    border-radius: 0.625rem;
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
    background: #009a9a;
    // background: rgba(2, 35, 60, 1);
  }

  &::-webkit-scrollbar-track {
    //轨道的样式
    -webkit-box-shadow: 0;
    border-radius: 0.625rem;
    background: #ccc;
  }

  &::-webkit-scrollbar-corner {
    background: red;
  }
}

/deep/.ant-table-fixed-header
  > .ant-table-content
  > .ant-table-scroll
  > .ant-table-body {
  overflow-y: auto !important;
}

.empty-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
